
import React, { Component } from "react";
// import echarts from "echarts/lib/echarts";
import echarts from "echarts";
import styles from './list.css'
import { Col, Row, Tooltip,Table, Button, Divider, Progress, Badge, Rate, Typography, Tag, Card, Radio, Modal, Descriptions, Statistic, Form,
          Select, Input, Switch, Checkbox, DatePicker, message, Popconfirm  } from 'antd';
import ReactEcharts from 'echarts-for-react';
import Breadcrumbs from "../../../components/component/Breadcrumb/breadcrumb";
import { BarChartOutlined, AlertOutlined, CaretUpOutlined, CaretDownOutlined, SyncOutlined, PoweroffOutlined, TwitterOutlined, GlobalOutlined,
         ClockCircleOutlined, WifiOutlined, DatabaseOutlined, PlusCircleOutlined, CloudServerOutlined, CalculatorOutlined } from '@ant-design/icons';
import { textStyle } from "echarts/lib/theme/dark";

// import { ProColumns } from '@ant-design/pro-table';
// import ProTable, { TableDropdown } from '@ant-design/pro-table';
const { Title } = Typography;
const { TextArea } = Input;
const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
  style: { marginBottom: 24 },
};

const plainOptions = ['系统消息', '短信通知', '邮件通知','电话通知'];

const datas = [
  {
    key: '1',
    id:'ceebef7d-b4ba-4ef4-91d3',
    name: 'MySql响应缓慢-数据库异常',
    count: '58%',
    num:5,
    ip:'192.168.201.36',
    port:80,
    level:'serious',
    unit: '党组织',
    institution: '环保局',
    source: '5',
    business:'操作权限,查看日志',
    creatTime:'2022-08-09 15:28:17'
  },  
  {
    key: '2',
    id:'193ad74b-b451-43da-8',
    name: 'HDMI默认-主机内存使用率过高',
    count: '38%',
    ip:'192.168.200.86',
    port:90,
    num:3,
    level:'serious',
    unit: '党组织',
    institution: '城市管理局',
    source: '39',
    business:'操作权限,管理用户,修改日志,权限分配',
    creatTime:'2022-10-19 10:28:17'
  },  
  {
    key: '3',
    name: 'cpu-CPU告警调测',
    id:'07ba2bea-b3a3-4659-8',
    count: '18%',
    ip:'192.168.209.16',
    port:8088,
    num:0,
    level:'normal',
    unit: '党组织',
    institution: '民政局',
    source: '12',
    business:'操作权限,查看日志',
    creatTime:'2022-11-01 15:08:17'
  },
  {
    key: '4',
    name: '数据库服务内存报警-内存溢出',
    id:'3f5802ca-60ed-4e68-9',
    count: '41%',
    ip:'192.168.144.73',
    port:8090,
    num:1,
    level:'same',
    unit: '党组织',
    institution: '城建局',
    source: '7',
    business:'查看日志',
    creatTime:'2022-11-01 15:08:17'
  },
  {
    key: '5',
    id:'f02b7f52-9736-4731-92',
    name: '主机服务器磁盘报警-磁盘异常',
    count: '35%',
    ip:'192.168.152.28',
    port:80,
    num:2,
    level:'same',
    unit: '政府组织',
    institution: '海关署',
    source: '5',
    business:'操作权限,查看日志',
    creatTime:'2022-11-01 15:08:17'
  },
  {
    key: '6',
    id:'458c803b-2a18-48a8-8',
    name: '服务器异常-宕机',
    count: '57%',
    ip:'192.168.89.17',
    port:80,
    num:2,
    level:'same',
    unit: '党组织',
    institution: '城建局',
    source: '39',
    business:'操作权限,管理用户,查看日志',
    creatTime:'2022-11-12 16:54:09'
  },
  {
    key: '7',
    id:'4fbb1d3c-f4f4-4b87-8d',
    name: '服务器主机内存溢出',
    count: '68%',
    ip:'192.168.30.98',
    port:90,
    num:1,
    level:'normal',
    unit: '政府组织',
    institution: '环保局',
    source: '5',
    business:'操作权限,查看日志',
    creatTime:'2022-11-01 15:08:17'
  },
  {
    key: '8',
    id:'d7730763-4c1d-488d-a',
    name: '带宽无法访问-服务响应异常',
    count: '81%',
    ip:'192.168.201.58',
    port:8088,
    num:1,
    level:'same',
    unit: '党组织',
    institution: '城建局',
    source: '39',
    business:'操作权限,管理用户,查看日志',
    creatTime:'2022-11-12 16:54:09'
  },  
];




export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {  
      loading:false,    
      loadings:false,    
      data:[],  
      alarmVisible:false,
      recordVisible:false,
      addVisible:false,
      detailInfo:{},
      cpuInfo:{},
      tableData:[],
      recordTableData:[],
      indexOptions:[
        {
          value:'CPU',
          label:'CPU'
        },
        {
          value:'GPU',
          label:'GPU'
        },
        {
          value:'内存',
          label:'内存'
        },
        {
          value:'磁盘',
          label:'磁盘'
        },
        {
          value:'带宽',
          label:'带宽'
        },
        {
          value:'公网Ip',
          label:'公网IP'
        },
        {
          value:'机器温度',
          label:'机器温度'
        },
        {
          value:'运行时间',
          label:'运行时间'
        },
        {
          value:'Swap',
          label:'Swap'
        },        
        {
          value:'数据库容量',
          label:'数据库容量'
        },
        {
          value:'I/O',
          label:'I/O'
        },
        {
          value:'响应时间',
          label:'响应时间'
        },
        {
          value:'并发量',
          label:'并发量'
        },

      ],
      columns: [
        {
          title: '告警配置ID',
          dataIndex: 'id',
          ellipsis:true,
          width:200,
          render:(_,record) => <a onClick={()=>{this.getDetailInfo(record)}}>{record.id}</a>
        },
        {
          title: '告警规则名称',
          dataIndex: 'name',
          ellipsis:true,
          width:210,
        },
        {
          title: '主机IP',
          dataIndex: 'ip',
          ellipsis:true,
          width:125,
        },
        {
          title: '端口',
          dataIndex: 'port',
          ellipsis:true,
          width:58,
        },
        {
          title: '告警触发次数',
          dataIndex: 'num',
          ellipsis:true,
          width:98,
        },
        {
          title: '类型',
          dataIndex: 'level',
          ellipsis:true,
          width:70,
          render: (_,record) => {
            return this.getStatus(record.level)
          },    
        },  
        {
          title: '配置部门',
          dataIndex: 'unit',
          width:90,
          ellipsis:true,
          sorter: {
            compare: (a, b) => a.math - b.math,
            multiple: 2,
          },
        },
        {
          title: '告警服务单位',
          dataIndex: 'institution',
          ellipsis:true,
          width:100,
          sorter: {
            compare: (a, b) => a.english - b.english,
            multiple: 1,
          },
        },
        {
          title: '机器数量',
          dataIndex: 'source', 
          width:100,
          ellipsis:true,
          render: (text)=> text+'台',
          sorter: {
            compare: (a, b) => a.english - b.english,
            multiple: 1,
          },
        },
        {
          title: '创建时间',
          dataIndex: 'creatTime', 
          ellipsis:true,
          width:150,
        },   
        {
          title: '更新时间',
          dataIndex: 'creatTime', 
          ellipsis:true,
          width:150,
        },
        {
          title: '操作',
          width:170,
          render: (_,record) => {
            return(
              <span>
                <a onClick={()=>{this.getRecord(record)}} style={{marginLeft:5}}>配置日志</a>
                <a onClick={()=>{this.getDetailInfo(record)}} style={{marginLeft:5}}>详情</a>
                <Popconfirm
                  title="确定删除当前配置数据吗？"
                  onConfirm={this.confirms}
                  onCancel={this.cancels}
                  okText="确定"
                  cancelText="取消"
                >
                  <a  style={{marginLeft:10,color:'#f14c4c'}}>删除</a>
                </Popconfirm>                 
              </span>
            )
          },
        },
      ],
      hostColumns: [
        {
          title: '告警配置描述',
          dataIndex: 'name',
          width:145,
          ellipsis:true,
        },             
        {
          title: 'CPU使用率',
          dataIndex: 'cpu',   
          ellipsis:true,    
          render:(_,record) =>  record.cpu
        },
        {
          title: '内存',
          dataIndex: 'storage',
          ellipsis:true,
          render:(_,record) =>  record.storage
        },
        {
          title: '磁盘',
          dataIndex: 'disc',
          ellipsis:true,
        },
        {
          title: '网络带宽',
          dataIndex: 'network',
          ellipsis:true,
        },     
        {
          title: 'CPU温度',
          dataIndex: 'temperature',
          ellipsis:true,
        },                      
        {
          title: 'CPU使用增长率',
          dataIndex: 'rate',
          ellipsis:true,
          render:(_,record) =>  record.key % 3 >1 ? <span><CaretUpOutlined style={{color:'rgb(135, 208, 104)'}}  /> {record.rate}</span> : <span><CaretDownOutlined style={{color:'#FF4D4F'}} /> {record.rate}</span>
        },
        {
          title: 'Region',
          ellipsis:true,
          dataIndex: 'region', 
          render:(_,record) =><span>{record.region}</span>
        }, 
        {
          title: 'POD',
          ellipsis:true,
          dataIndex: 'pod', 
        },         
        {
          title: '告警状态',
          ellipsis:true,
          dataIndex: 'status',
          render:(_,record)=>{
            if(record.status === '成功'){
                return  <span>
                  <Badge status="success" /> 
                  <span style={{marginLeft:6}}>成功</span>
                </span>
            }else{
              return  <span>
                <Badge status="error" /> 
                <span style={{marginLeft:6}}>失败</span>
            </span>
            }
          }
        },                   
      ],   
      recordColumns: [
        {
          title: '日志内容',
          dataIndex: 'name',
          width:145,
          ellipsis:true,
        },
        {
          title: '日志级别',
          dataIndex: 'rank',
          ellipsis:true,
          align:'center'
        },              
        {
          title: 'CPU',
          dataIndex: 'cpu',   
          ellipsis:true,    
          render:(_,record) =>  record.cpu
        },
        {
          title: '内存',
          dataIndex: 'storage',
          ellipsis:true,
          render:(_,record) =>  record.storage
        },
        {
          title: '磁盘',
          dataIndex: 'disc',
          ellipsis:true,
        },
        {
          title: '带宽',
          dataIndex: 'network',
          ellipsis:true,
        },     
        {
          title: 'CPU温度',
          dataIndex: 'temperature',
          ellipsis:true,
        },                      
        {
          title: '硬件使用增长率',
          dataIndex: 'rate',
          ellipsis:true,
          render:(_,record) =>  record.key % 3 >1 ? <span><CaretUpOutlined style={{color:'rgb(135, 208, 104)'}}  /> {record.rate}</span> : <span><CaretDownOutlined style={{color:'#FF4D4F'}} /> {record.rate}</span>
        },        
        {
          title: '日志状态',
          ellipsis:true,
          dataIndex: 'status',
          render:(_,record)=>{
            if(record.status === '成功'){
                return  <span>
                  <Badge status="success" /> 
                  <span style={{marginLeft:6}}>正常</span>
                </span>
            }else{
              return  <span>
                <Badge status="error" /> 
                <span style={{marginLeft:6}}>异常</span>
            </span>
            }
          }
        },                   
      ],                   
    };
  }

  getStatus = (level) => {
    if(level =='serious'){
        return(
            <Badge status="error" text="严重" />
        )
    }else if(level =='normal'){
      return(
        <Badge status="success" text="正常" />
        )
    }else if(level =='same'){
      return(
        <Badge status="warning" text="一般" />
        )
    }
  }

  confirms = () =>{
    message.success('数据删除成功!');
    this.getData();
  }

  getRecord = () =>{
    let lists = [];
    for (let i = 0; i < Math.floor(Math.random()*50); i++) {
      lists.push({
        key: i,
        name: i % 3 > 1 ? '数据库服务器内存溢出'+Math.floor(Math.random() * 97).toFixed(2)+'MB' : '服务器带宽拥堵'+Math.floor(Math.random() * 650).toFixed(2)+'kb/s',
        cpu: Math.floor(Math.random() * 98).toFixed(2)+'%',
        storage: Math.floor(Math.random() * 97).toFixed(2)+'%',
        disc: Math.floor(Math.random() * 95).toFixed(2)+'%',
        network: Math.floor(Math.random() * 521)+'KB/s',
        acoustic: Math.floor(Math.random() * 93)+'%',
        temperature: Math.floor(Math.random() * 92)+'℃',
        rate: Math.floor(Math.random() * 50)+'%',
        status: i % 2 == 1 ? '成功' :'失败',
        region: i % 4 > 1 ? '华东' :'华南',
        pod: i % 5 > 2 ? 'POD'+i :'POD'+i*2,
        rank: i % 5 == 2 ? 'I' :'II',
      });
    }
    this.setState({recordVisible:true, recordTableData:lists,loadings:false})
  }

  getDetailInfo = (info)=>{
    console.log(info)
    this.setState({detailInfo:info,alarmVisible:true,
    cpuInfo:{
      cpu: (Math.random()*(100)).toFixed(2),
      storage: (Math.random()*(100)).toFixed(2),
      disc: (Math.random()*(100)).toFixed(2),
      network: (Math.random()*(500)).toFixed(1),
      acoustic: (Math.random()*(100)).toFixed(2),
      temperature: (Math.random()*(96)).toFixed(2),
    }});
  }
  
  getDetailTable = () =>{
    let list = [];
    let total = Math.floor(Math.random()*50);
    for (let i = 0; i < 26; i++) {
      list.push({
        key: i,
        name: i % 3 > 1 ? '数据库服务器内存溢出' : '服务器CPU过载过热',
        cpu: Math.floor(Math.random() * 98).toFixed(2)+'%',
        storage: Math.floor(Math.random() * 97).toFixed(2)+'%',
        disc: Math.floor(Math.random() * 95).toFixed(2)+'%',
        network: Math.floor(Math.random() * 521)+'KB/s',
        acoustic: Math.floor(Math.random() * 93)+'%',
        temperature: Math.floor(Math.random() * 92)+'℃',
        rate: Math.floor(Math.random() * 50)+'%',
        status: i % 2 == 1 ? '成功' :'失败',
        region: i % 4 > 1 ? '华东' :'华南',
        pod: i % 5 > 2 ? 'POD'+i :'POD'+i*2,
      });
    }
    this.setState({tableData:list,loadings:false})
  }

  getData = () =>{
    this.setState({
      loading: true,
      data:[]
    });
    setTimeout(() => {
      this.setState({
        loading: false,
        data:datas
      });    
    }, 1000);
  }

  getBarOption(){
    return {
      title: {
        text: ''
      },
      color:['#0780cf','#765005'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line'
        }
      },
      legend: {
        trigger:'item',
        left:'center'
      },
      grid: {
        left: '0%',
        right: '13%',
        bottom: '4%',
        top:'11%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        name:'月',
        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
      },
      yAxis: {
        type: 'value',
        name:'集群(台)',
      },
      series: [
        {
          name: '服务正常',
          type: 'bar',
          barWidth:6,
          itemStyle: {
            normal: {
                //这里是颜色
                color: '#70ce42',
            }
          },
          data: [ 15, 16, 24, 19, 23, 28, 19, 20, 12, 9, 6, 2 ]
        },
        {
          name: '服务异常',
          type: 'bar',
          barWidth:6,
          itemStyle: {
            normal: {
                //这里是颜色
                color: '#aaa',
            }
          },
          data: [ 8, 11, 20, 18, 10, 8, 9, 2, 7, 3, 0, 1]
        }
      ]
    }
  }

  getCookieOption = () =>{
    return {
      color:['#05f8d6','#0082fc','#fdd845','#22ed7c','#09b0d3','#1d27c9'],
      title: {
        text:'云服务告警占比情况',
        // subtext: '云服务告警占比情况',
        left: 'center',
        textStyle:{
          color:'#777'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} {b} : {c}%'
      },
      series: [
        {
          name: '告警占比 :',
          type: 'pie',
          radius: '65%',
          data: [
            { value: 3, name: '系统盘溢出' },
            { value: 5, name: 'SSD过满' },
            { value: 7, name: '内存溢出' },
            { value: 2, name: '带宽超值' },
            { value: 1, name: '服务宕机' },
            { value: 2, name: 'CPU过载' },
            { value: 1, name: '数据库异常' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
  }

  getCardOption = () =>{
    return {
      grid:{
        top:3,
        left:3,
        right:20,
        bottom:20
      },
      color: ["#5474fa"], 
      xAxis: {
        type: 'category',
        nameLocation: 'middle',
        data: ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', 
        '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时']
      },
      yAxis: {
        type: 'value',
        splitLine: {
          //网格线
          lineStyle: {
            type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
            width: 1,
            //color:"red"
          },
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer:{
          lineStyle:{
            type:'dashed'
          }
        }
      },
      series: [
        {
          data: [0, 1, 0, 1, 1, 0, 2,3,2,1,0,0,2,6,3,1,3,0,2,8,3,1,1,0],
          type: 'line',
          showSymbol: false,
          smooth: false,
          lineStyle:{
            color:'#5474fa'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(84,116,250,1)'
            }, {
              offset: 1,
              color: 'rgba(84,116,250,0)'
            }])
          },          
        }
      ]
    };
  }

  getRecordOption = () =>{
    return {
      title:{
        text:'CPU使用率',
        left:'center'
      },
      grid:{
        top:28,
        left:28,
        right:20,
        bottom:18
      },
      color: ["#69b5fb"], 
      xAxis: {
        type: 'category',
        nameLocation: 'middle',
        data: ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', 
        '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时'],
        axisTick: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#999',
          showMinLabel: true,
          showMaxLabel: true,
        },
        axisLine: {
          lineStyle: {
            type: 'solid',
            color: '#999'
          }
        },
        boundaryGap: false
      },
      yAxis: {
        type: 'value',
        name:'使用率(%)',
        splitLine: {
          //网格线
          lineStyle: {
            type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
            width: 1,
            color:"#999"
          },
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer:{
          lineStyle:{
            type:'dashed'
          }
        },
        textStyle: {
          color: '#fff'
        },
        backgroundColor: 'rgba(0,0,0,0.9)',
        confine: true // 超出的部分不会被遮盖
      },
      series: [
        {
          data: [56.3, 53.6, 50.3, 48.8, 46.8, 63.9, 69.3,72.3,78.3,77.6,78.9,81.2,95.6,82.6,86.1,85.1,80.3,79.1,76.3,80.6,70.3,63.3,62.1,62.8],
          type: 'line',
          showSymbol: false,
          smooth: false,
          lineStyle:{
            color:'#69b5fb'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(105,181,251,0.9)'
            }, {
              offset: 1,
              color: 'rgba(105,181,251,0)'
            }])
          }
        }
      ]
    };
  }
  
  timeOnChange = () =>{
      this.setState({loadings:true, tableData: []},()=>{
        setTimeout(() => {
          this.getDetailTable()
        }, 1000);
      })
  }

  componentDidMount() {
    this.getData();
    setTimeout(() => {
      this.setState({loadings:true},()=>{
        this.getDetailTable()
      })
    }, 1000);
    window.scrollTo(0, 0);
  }

  onChange = (pagination, filters, sorter, extra) => {
    console.log('params', pagination, filters, sorter, extra);
    this.getData();
  }

  onChartClick(param,echarts){
    console.log(param)
  } 

  onRecordEvents(param,echarts){
    this.setState({loadings:true, recordTableData: []},()=>{
      setTimeout(() => {
        this.getRecord();
      }, 1000);
    })    
  }

  handleOk = () =>{
    this.setState({alarmVisible:false, recordVisible:false})
  }

  handleOks = () =>{
    this.setState({ addVisible: false},()=>{
        message.success('新怎告警规则成功!');
        this.getData();
    })
  }

  addData = () =>{
    this.setState({ addVisible: true});
  }

  render() {
    const { data, loading, columns, alarmVisible, detailInfo, cpuInfo, hostColumns, loadings, tableData, recordTableData, recordVisible, 
      recordColumns, addVisible, indexOptions } = this.state;
    let onEvents={
      'click': this.onChartClick.bind(this),
    }
    let onRecordEvents={
      'click': this.onRecordEvents.bind(this),
    }
    return (
      <>
        <div style={{marginLeft:0}}>
            <Breadcrumbs props={this.props}></Breadcrumbs>
        </div>
        <Divider />   
        <div style={{margin:30}}>
          <div className="topBox" style={{width:'94%',margin:20}}>
          <Card title='' style={{width:500,height:288}}>
              <ReactEcharts
                  option={this.getBarOption()} 
                  notMerge={true}
                  lazyUpdate={true}
                  onEvents={onEvents}
                  style={{width:500,height:260}}
              /> 
            </Card>
            <Card title='' style={{width:500,height:288}}>
              <ReactEcharts
                  option={this.getCookieOption()} 
                  notMerge={true}
                  lazyUpdate={true}
                  onEvents={onEvents}
                  style={{width:500,height:260}}
              /> 
            </Card>
          <Card title=''
              style={{width:500}}
              cover={
                <div>
                    <p className='clearfix'>
                      <span>告警总数</span>
                      <span className='titleTextIcon'><BarChartOutlined twoToneColor="#eb2f96" /></span>
                    </p>
                    <p className='money'>
                      <span className="alerticon"><AlertOutlined /></span>
                      <span>12</span>
                      <span>个</span>
                    </p>  
                    <p className="rates">
                      <span style={{color:'red',marginLeft:10}}><span style={{color:'#aaa'}}>日环比</span> <CaretUpOutlined /></span> 1%  <span style={{color:'green',marginLeft:50}}><span style={{color:'#aaa'}}>周环比 </span><CaretDownOutlined /></span> 5%
                    </p>                 
                </div>
              }            
            >
              <div className='cardContent'>
                  <ReactEcharts
                      option={this.getCardOption()} 
                      notMerge={true}
                      lazyUpdate={true}
                      onEvents={onEvents}
                      style={{width:450,height:95}}
                  />                        
              </div>
          </Card>  
          </div>
          <Divider />
          <div>
            <Title style={{textAlign:'left',marginLeft:30,marginBottom:45}} level={5}><AlertOutlined /> 告警配置列表</Title>
              <div style={{marginTop:20,marginLeft:23}}>
                  <Button style={{marginRight:10}} onClick={this.addData} type="primary"><PlusCircleOutlined /> 新增告警配置</Button>
              </div>
              <Table style={{margin:20}} columns={columns} dataSource={data} size="middle" onChange={this.onChange}
                loading={loading}
                pagination={{
                  pageSize:5,
                  total:8,
                  showTotal:(total) => `共 ${total} 条`,
                  }
                  } />
          </div>
        </div>
        <Modal title="主机告警详情" visible={alarmVisible} onOk={this.handleOk} width={888} onCancel={()=>{this.setState({alarmVisible:false})}}>
            <div style={{width:'100%'}}>
              <Descriptions title={detailInfo.name}>
                <Descriptions.Item label="告警配置ID">{detailInfo.id}</Descriptions.Item>
                <Descriptions.Item label="告警等级">{
                detailInfo.level ==='serious'? <Tag color="red">严重</Tag> : detailInfo.level ==='same'? <Tag color="orange">一般</Tag>: <Tag color="green">正常</Tag>
                }</Descriptions.Item>
                <Descriptions.Item label="CPU使用率">{detailInfo.count}</Descriptions.Item>
                <Descriptions.Item label="主机数量">{detailInfo.source}台</Descriptions.Item>
                <Descriptions.Item label="告警次数阈值">
                {detailInfo.num >2 ? <span style={{color:'red',fontSize:16, fontWeight:600}}> {detailInfo.num} </span>: <span> {detailInfo.num} </span>}
                  次</Descriptions.Item>
                <Descriptions.Item span={1} label="告警状态">
                  {
                    detailInfo.level ==='serious'? <span style={{color:'#aaa'}}><PoweroffOutlined /> 关闭</span> : detailInfo.level ==='same'? <span style={{color:'#d46b08'}}><ClockCircleOutlined />规则禁用</span>: <span style={{color:'#389e0d'}}><SyncOutlined spin /> 开启</span>
                  }
                </Descriptions.Item>
              </Descriptions>
            </div>
            <Divider />
            <div className='card_list'>
            <Card style={{width:133,border:'1px solid #1677ff'}}>
                <Statistic
                  title="CPU <="
                  value={cpuInfo.cpu}
                  precision={2}
                  valueStyle={{
                    color: '#1677ff',
                    fontSize:18
                  }}
                  prefix={<CalculatorOutlined style={{fontSize:16}} />}
                  suffix="%"
                />
              </Card>
              <Card style={{width:133,border:'1px solid #1677ff'}}>
                <Statistic
                  title="内存<="
                  value={cpuInfo.storage}
                  precision={2}
                  valueStyle={{
                    color: '#1677ff',
                    fontSize:18
                  }}
                  prefix={<CloudServerOutlined style={{fontSize:16}} />}
                  suffix="%"
                />
              </Card>
              <Card style={{width:133, border:'1px solid #1677ff'}}>
                <Statistic
                  title="磁盘>="
                  value={cpuInfo.disc}
                  precision={2}
                  valueStyle={{
                    color: '#1677ff',
                    fontSize:18
                  }}
                  prefix={<DatabaseOutlined style={{fontSize:16}} />}
                  suffix="%"
                />
              </Card>
              <Card style={{width:133, border:'1px solid #1677ff'}}>
                <Statistic
                  title="网络带宽 >="
                  value={cpuInfo.network}
                  precision={2}
                  valueStyle={{
                    color: '#1677ff',
                    fontSize:18
                  }}
                  prefix={<WifiOutlined style={{fontSize:16}} />}
                  suffix="KB/s"
                />
              </Card>
              <Card style={{width:133, border:'1px solid #1677ff'}}>
                <Statistic
                  title="公网IP =="
                  value={cpuInfo.acoustic}
                  precision={2}
                  valueStyle={{
                    color: '#1677ff',
                    fontSize:18
                  }}
                  prefix={<GlobalOutlined style={{fontSize:16}} />}
                  suffix="%"
                />
              </Card>              
              <Card style={{width:133, border:'1px solid #1677ff'}}>
                <Statistic
                  title="温度 <="
                  value={cpuInfo.temperature}
                  precision={2}
                  valueStyle={{
                    color: '#1677ff',
                    fontSize:18
                  }}
                  prefix={<AlertOutlined style={{fontSize:16}} />}
                  suffix="℃"
                />
              </Card>
            </div>
            <Divider />
            <div>
              <div style={{margin:'15px 0'}}>
                <Radio.Group onChange={this.timeOnChange} buttonStyle="solid" defaultValue="a">
                  <Radio.Button value="a">近一分钟</Radio.Button>
                  <Radio.Button value="b">近一小时</Radio.Button>
                  <Radio.Button value="c">近一天</Radio.Button>
                  <Radio.Button value="d">近一周</Radio.Button>
                  <Radio.Button value="e">近一月</Radio.Button>
                  <Radio.Button value="f">近一年</Radio.Button>
                </Radio.Group>
              </div>
              <Table size="small" style={{width:'100%',margin:'15px 5px',background:'#fff',overflow:"hidden"}} columns={hostColumns} loading={loadings} dataSource={tableData} 
                    pagination={{
                    pageSizeOptions:['5','10','20'],
                    pageSize:3,
                    showSizeChanger: true,
                    onShowSizeChange:this.onShowSizeChange,
                    showTotal: (total) => `总数${total}`
              }}/>
            </div>
          </Modal>  
          <Modal title="日志详情" visible={recordVisible} onOk={this.handleOk} width={888} onCancel={()=>{this.setState({recordVisible:false})}}>
            <Table size="small" style={{width:'100%',margin:'5px 2px',background:'#fff',overflow:"hidden"}} 
                columns={recordColumns} loading={loadings} dataSource={recordTableData} 
                    pagination={{
                    pageSizeOptions:['5','10','20'],
                    pageSize:5,
                    showSizeChanger: true,
                    onShowSizeChange:this.onShowSizeChange,
                    showTotal: (total) => `总数${total}`
              }}/>
          </Modal>  
          <Modal title="新增告警配置" visible={addVisible} onOk={this.handleOks} width={888} onCancel={()=>{this.setState({addVisible:false})}}>
          <Form
              name="basic"
              style={{width:836,margin:'0 auto'}}
              labelCol={{
                span: 4,
              }}
              wrapperCol={{
                span: 20,
              }}
              initialValues={{
                ruleName:'',
                ruleRate:'',
                ruleIndex:[],
                ruleFunction:'a',
                ruleStatus:true,
                ruleWay:[],
                ruleTime: null,
                ruleRemark:''
              }}
              autoComplete="off">
              <Form.Item                
                label="告警规则名称"
                name="ruleName"
                layout='inline'
                rules={[
                  {
                    required: true,
                    message: '请输入告警规则名称!',
                  },
                ]}>
                <Input placeholder="请输入告警规则名称" style={{width:300}}  />
              </Form.Item>     
              <Form.Item                
                label="规则频次"
                name="ruleRate"
                layout='inline'
                rules={[
                  {
                    required: true,
                    message: '请输入告警规则频次!',
                  },
                ]}>
                  <Select
                    allowClear
                    style={{
                      width: 200,
                    }}
                    placeholder="请选择告警指标"
                    options={[
                      {
                        value: '一次性检查',
                        label: '一次性检查',
                      },
                      {
                        value: '固定频率',
                        label: '固定频率',
                      },
                      {
                        value: '轮询检查',
                        label: '轮询检查',
                      },
                    ]}>
                  </Select>
                  <Input placeholder="请输入次数" style={{width:100,marginLeft:5}}  />
                  <Select
                    allowClear
                    style={{
                      width: 100,
                      marginLeft:5
                    }}
                    placeholder="请选择时间"
                    options={[
                      {
                        value: '分钟',
                        label: '分钟',
                      },
                      {
                        value: '小时',
                        label: '小时',
                      },
                      {
                        value: '天',
                        label: '天',
                      },
                    ]}>
                  </Select>                  
              </Form.Item>                         
              <Form.Item
                label="规则指标"
                name="ruleIndex"
                layout='inline'
                rules={[
                  {
                    required: true,
                    message: '请选择告警规则指标!',
                  },
                ]}>
                  <Select
                    mode="multiple"
                    allowClear
                    style={{
                      width: 300,
                    }}
                    placeholder="请选择告警指标"
                    options={indexOptions}/>                  
              </Form.Item> 
              <Form.Item
                label="规则阈值配置"
                name="ruleThreshold"
                layout='inline'
                rules={[
                  {
                    required: true,
                    message: '请选择规则阈值配置!',
                  },
                ]}>
                  <Select
                    allowClear
                    style={{
                      width: 200,
                      marginLeft:5
                    }}
                    placeholder="请选择规则阈值配置"
                    options={indexOptions}>
                  </Select>
                  <Select
                    allowClear
                    style={{
                      width: 80,
                      marginLeft:5
                    }}
                    placeholder="请选择告警等级"
                    options={[
                      {
                        value:'1分钟',
                        label:'1分钟',
                      },
                      {
                        value:'5分钟',
                        label:'5分钟',
                      },
                      {
                        value:'30分钟',
                        label:'30分钟',
                      },
                      {
                        value:'1小时',
                        label:'1小时',
                      },  
                      {
                        value:'3小时',
                        label:'3小时',
                      },   
                      {
                        value:'6小时',
                        label:'6小时',
                      },    
                      {
                        value:'12小时',
                        label:'12小时',
                      },  
                      {
                        value:'24小时',
                        label:'24小时',
                      },                                                       
                    ]}>
                    </Select>    
                    <Select
                    allowClear
                    style={{
                      width: 80,
                      marginLeft:5
                    }}
                    placeholder="逻辑值"
                    options={[
                      {
                        value:'最大值',
                        label:'最大值',
                      },
                      {
                        value:'最小值',
                        label:'最小值',
                      },
                      {
                        value:'平均值',
                        label:'平均值',
                      },
                      {
                        value:'SUM合值',
                        label:'SUM合值',
                      },                                                          
                    ]}>
                  </Select>   
                  <Select
                  allowClear
                  style={{
                    width: 80,
                    marginLeft:5
                  }}
                  placeholder="逻辑运算符号"
                  options={[
                    {
                      value:'>',
                      label:'>',
                    },
                    {
                      value:'>=',
                      label:'>=',
                    },
                    {
                      value:'=',
                      label:'=',
                    },
                    {
                      value:'<',
                      label:'<',
                    },   
                    {
                      value:'<=',
                      label:'<=',
                    },                                                                                
                  ]}>
                </Select>  
                <Input placeholder="请输入阈值" style={{width:80,marginLeft:5}}  />   
                <Select
                  allowClear
                  style={{
                    width: 80,
                    marginLeft:5
                  }}
                  placeholder="运算单位"
                  options={[
                    {
                      value:'%',
                      label:'%',
                    },
                    {
                      value:'‰',
                      label:'‰',
                    },
                    {
                      value:'KB/s',
                      label:'KB/s',
                    },
                    {
                      value:'℃',
                      label:'℃',
                    },   
                    {
                      value:'台',
                      label:'台',
                    },                                                                                
                  ]}>
                </Select>                                                                                  
              </Form.Item>              
              <Form.Item
                label="告警指标性能"
                name="ruleFunction"
                layout='inline'
                rules={[
                  {
                    required: true,
                    message: '请选择告警指标性能!',
                  },
                ]}>
                  <Radio.Group >
                    <Radio.Button value="a">JVM性能指标</Radio.Button>
                    <Radio.Button value="b">RT</Radio.Button>
                    <Radio.Button value="c">硬件性能</Radio.Button>
                    <Radio.Button value="d">内存性能</Radio.Button>
                    <Radio.Button value="e">GC状态</Radio.Button>
                    <Radio.Button value="f">堆使用指标</Radio.Button>
                    <Radio.Button value="h">并发量</Radio.Button>
                  </Radio.Group>
              </Form.Item>
              <Form.Item
                label="告警等级"
                name="ruleLevel"
                layout='inline'
                rules={[
                  {
                    required: true,
                    message: '请选择告警等级!',
                  },
                ]}>
                  <Select
                    allowClear
                    style={{
                      width: 300,
                    }}
                    placeholder="请选择告警等级"
                    options={[
                      {
                        value:'严重',
                        label:'严重',
                      },
                      {
                        value:'中度',
                        label:'中度',
                      },
                      {
                        value:'轻度',
                        label:'轻度',
                      },
                    ]}>
                    </Select>
                </Form.Item>  
                <Form.Item                
                  label="规则状态"
                  name="ruleStatus"
                  layout='inline'
                  rules={[
                    {
                      required: true,
                      message: '请输入规则状态!',
                    },
                  ]}>
                    <Switch  />
                </Form.Item>
                <Form.Item                
                  label="告警方式"
                  name="ruleWay"
                  layout='inline'
                  rules={[
                    {
                      required: true,
                      message: '请选择告警方式!',
                    },
                  ]}>
                    <Checkbox.Group options={plainOptions}  />
                </Form.Item>
                <Form.Item                
                  label="开始时间"
                  name="ruleTime"
                  layout='inline'
                  rules={[
                    {
                      required: true,
                      message: '请选择开始时间!',
                    },
                  ]}>
                    <DatePicker style={{width:300}} showTime  />  
                </Form.Item>
                <Form.Item                
                  label="备注"
                  name="ruleRemark"
                  layout='inline'>
                    <TextArea rows={2} style={{width:'80%'}} placeholder="请输入备注" />
                </Form.Item>                                                                                       
            </Form>  
          </Modal>            
      </>
    )
    }
}
